<template>
  <div class="discount-coupon">
    <navBar></navBar>
    <div class="main">
      <van-tabs v-model="active">
        <van-tab title="未使用 (0)">
          <div class="coupon">
            <div class="coupon-top">
              <div class="coupon-top-left">
                <div>
                  <h5 class="coupon-title">海鲜水产20元券</h5>
                </div>
                <div class="coupon-tag">
                  <span class="coupon-tag-info">仅限海鲜水产类商品</span>
                </div>
                <div class="coupon-time">
                  <span class="pad-r5">有效期:</span>
                  <span class="pad-r5">2019.01.01</span>
                  <span>-2019.01.01</span>
                </div>
              </div>
              <div class="coupon-top-right">
                <span class="units">$</span>
                <span>20</span>
              </div>
            </div>
            <div class="coupon-bottom">
              <span>指定商品满99.00元减20元</span>
              <span class="coupon-use">
                <a href="#">查看可用商品 ></a>
              </span>
            </div>
          </div>
        </van-tab>
        <van-tab title="已使用 (0)">内容 2</van-tab>
        <van-tab title="已过期 (0)">内容 3</van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/nav-bar";
import { Tab, Tabs } from "vant";
Vue.use(Tab).use(Tabs);
export default {
  data() {
    return {
      active: 1,
      unusedCoupon: [
        {
          name: "海鲜水产20元券",
          tag: "仅限海鲜水产类商品",
          startTime: "2019.01.01",
          endTime: "2019.01.01",
          price: "20",
          info: "指定商品满99.00元减20元"
        }
      ]
    };
  },
  components: {
    navBar
  },
  methods: {}
};
</script>

<style lang="less">
* {
  padding: 0;
  margin: 0;
}
.pad-r5 {
  padding-right: 5px;
}
.discount-coupon {
  height: 100%;
  width: 100%;
  background: rgba(247, 247, 247, 1);
  .main {
    padding-top: 50px;
    .coupon {
      width: 358px;
      height: 123px;
      padding: 10px 11px;
      box-sizing: border-box;
      background: url(/img/26.png) no-repeat center center;
      background-size: 100%;
      .coupon-top {
        display: flex;
        justify-content: space-between;
        .coupon-top-left {
          .coupon-title {
            font-size: 14px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(48, 48, 48, 1);
            padding-bottom: 4px;
          }
          .coupon-tag {
            position: relative;
            width: 100px;
            height: 14px;
            background: linear-gradient(
              137deg,
              rgba(254, 102, 118, 1) 0%,
              rgba(244, 138, 152, 1) 100%
            );
            border-radius: 0px 7px 0px 7px;

            .coupon-tag-info {
              position: absolute;
              left: 50%;
              top: 50%;
              width: 100px;
              height: 14px;
              text-align: center;
              transform: translate(-50%, -50%);
              font-size: 9px;
              font-family: PingFangSC-Regular;
              font-weight: 400;
              color: rgba(255, 255, 255, 1);
            }
          }
          .coupon-time {
            padding-top: 12px;
            font-size: 11px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
          }
        }
        .coupon-top-right {
          font-size: 35px;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          color: rgba(253, 106, 122, 1);
          .units {
            font-size: 14px;
          }
        }
      }
      .coupon-bottom {
        display: flex;
        justify-content: space-between;
        padding-top: 26px;
        font-size: 11px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        .coupon-use {
          a {
            text-decoration: none;
            font-size: 11px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(22, 89, 139, 1);
          }
        }
      }
    }
    .van-tab__pane {
      display: flex;
      justify-content: center;
    }
    .van-tabs__wrap {
      height: 40px;
    }
    .van-tabs__line {
      width: 51px;
      height: 2px;
      background: rgba(22, 89, 139, 1);
    }
  }
}
</style>
